<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<title>Demo - Catálogo de Cursos</title>
	<link rel="stylesheet" href="../css/normalize.css">
	<link rel="stylesheet" href="../css/style.css">
	<link rel="stylesheet" href="../css/jquery-ui-1.10.3.custom.min.css">
</head>
<body>
	<script type="text/x-handlebars" data-template-name="application">
    	{{partial 'header'}}
    	{{outlet}}   
    	{{partial 'footer'}}
	</script>

	<script type="text/x-handlebars" data-template-name="_header">
		<header>
			<h1>{{#linkTo index}}Catálogo de Cursos{{/linkTo}}</h1>
		</header>
		<hr/>
	</script>

	<script type="text/x-handlebars" data-template-name="_footer">
		<hr/>
		<footer>
			<div style="text-align: left"><a href="../index.html">Volver</a></div><div style="text-align: right;">&copy;2013 Carlos Alonso González</div>
		</footer>
	</script>
	
	<script type="text/x-handlebars" data-template-name="cursos">
		<h2>LISTADO DE CURSOS</h2>
		{{#linkTo cursos.new}}Nuevo{{/linkTo}}

		<center>
		<table border="1" cellspacing="0" cellpadding="5" width="80%">
			<thead>
				<tr>
					<th>
						{{#view App.SorterView column='titulo'}}
							<a href="#">Título</a>
						{{/view}}
					</th>
					<th width="100">
						{{#view App.SorterView column='nivel'}}
							<a href="#">Nivel</a>
						{{/view}}
					<th width="50">
						{{#view App.SorterView column='horas'}}
							<a href="#">Horas</a>
						{{/view}}
					<th width="50">Temario</th>
					<th width="50"></th>
				</tr>
			</thead>
			<tbody>
				{{#unless model}}
					<tr>
						<td colspan="5" align="center">No hay ningún curso activo</td>
					</tr>
				{{else}}
					{{#each model}}
						<tr>
							<td>{{titulo}}</td>
							<td>{{nivel}}</td>
							<td>{{horas}}</td>
							<td align="center">
								{{#if temario}}
									{{#view App.ClickableView contentBinding='this'}}
										<a href="#">Descargar</a>
									{{/view}}
								{{/if}}
							</td>
							<td align="center">
								{{#linkTo cursos.edit this}}Editar{{/linkTo}}
							</td>
						</tr>
					{{/each}}
				{{/unless}}				
			</tbody>
		</table>
		</center>
	</script>
	
	<script type="text/x-handlebars" data-template-name="cursos/new">
		{{partial 'cursos/form'}}
	</script>
	
	<script type="text/x-handlebars" data-template-name="cursos/edit">
		{{partial 'cursos/form'}}
	</script>
	
	<script type="text/x-handlebars" data-template-name="cursos/_form">
		<h2>EDICIÓN CURSO</h2>

		<table cellspacing="5" cellpadding="5">
		<tr>
			<td align="right">Activo</td>
			<td>{{view Ember.Checkbox checkedBinding='activo'}}</td>
		</tr>	
		<tr>
			<td align="right">Profesor</td>
			<td>
				{{view Ember.Select
                    contentBinding='controller.tutores'
					optionValuePath='content.id'
  					optionLabelPath='content.nombreCompleto'
					selectionBinding='tutor'
                    prompt='Seleccione un tutor'
				}}
			</td>
		</tr>
		<tr>
			<td align="right">Título</td>
			<td>{{view Ember.TextField valueBinding='titulo'}}</td>
		</tr>
		<tr>
			<td align="right">Nivel</td>
			<td>
				{{view Ember.Select 
					contentBinding='App.niveles'
					valueBinding='nivel'
                    prompt='Seleccione el nivel'}}
			</td>
		</tr>
		<tr>
			<td align="right">Horas</td>
			<td>{{view Ember.TextField min='0' max='500' type='number' valueBinding='horas'}}</td>
		</tr>
		<tr>
			<td align="right">Temario</td>
			<td>{{view App.UploadFileView name='temario' contentBinding='content'}}</td>
		</tr>
		<tr>
			<td colspan="2" align="center">
				<button {{action save}}>Guardar</button>
				<button {{action cancel}}>Cancelar</button>
			</td>
		</tr>
		</table>
	</script>
	
	<script src="../js/comun.js" type="text/javascript"></script>
	<script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
	<script src="../js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
	
	<script src="js/libs/handlebars-1.0.0-rc.3.js" type="text/javascript"></script>
	<script src="js/libs/ember-1.0.0-rc.3.js" type="text/javascript"></script>
	<script src="js/libs/ember-data-1.0.0-rc.3.js" type="text/javascript"></script>
	
	<script src="js/app.js" type="text/javascript"></script>
	<script src="js/models.js" type="text/javascript"></script>
	<script src="js/controllers.js" type="text/javascript"></script>
	<script src="js/routes.js" type="text/javascript"></script>
	<script src="js/views.js" type="text/javascript"></script>
	<script src="js/datastore.js" type="text/javascript"></script>
	<!-- <script src="js/datastore-test.js" type="text/javascript"></script> -->
</body>
</html>